<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>bootstrap商城</title>
    <!-- 引入bootstrap的css文件 -->
    <link rel="stylesheet" href="./bootstrap3/css/bootstrap.css" />
    <!-- 引入自己写的css -->
    <link rel="stylesheet" href="./css/style.css" />
    <!-- 用于支持ie8标签和媒体的查询 -->
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
  </head>
  <body>
    <!-- navbar -->
    <nav class="navbar-inverse" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button
            class="navbar-toggle collapsed"
            type="buttton"
            data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1"
          >
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="index.html" class="navbar-brand">Bootstrap 商城</a>
        </div>
        <!-- 导航链接及内容 -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="dropdown">
              <a href="#" class="active dropdown-toggle" data-toggle="dropdown">
                所有商品分类
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="category.html">吃的</a></li>
                <li><a href="category.html">喝的</a></li>
                <li><a href="category.html">玩的</a></li>
                <li><a href="category.html">凑数</a></li>
                <li><a href="category.html">凑数</a></li>
                <li><a href="category.html">凑数</a></li>
                <li class="divider"></li>
                <li><a href="category.html">所有商品分类</a></li>
              </ul>
            </li>
            <li>
              <a href="https://www.cnblogs.com/sex-luthor/" target="_blank"
                >我的博客园</a
              >
            </li>
            <li>
              <a href="https://gitee.com/sex-luthor/" target="_blank"
                >我的码云</a
              >
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="buy.html">
                <span class="badge pull-right">4</span>
                <i class="glyphicon glyphicon-shopping-cart"></i>
              </a>
            </li>
            <li>
              <a href="buy.html">
                <i class="glyphicon glyphicon-user"></i>
              </a>
            </li>
            <li>
              <a href="#" data-toggle="modal" data-target="#myModal">登录</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- Modal -->
    <div
      class="modal fade"
      id="myModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close" type="button" data-dismiss="modal">
              <span aria-hidden="true">&times;</span>
              <span class="sr-only">关闭</span>
            </button>
            <h2 class="modal-title" id="myModalLabel">登录</h2>
          </div>
          <div class="modal-body">
            <form role="form" class="form-signin">
              <h3 class="form-signin-heading">电子邮箱登录</h3>
              <div class="form-group">
                <input
                  type="email"
                  class="form-control"
                  placeholder="电子邮箱"
                  required
                  autofocus
                />
              </div>
              <div class="form-group">
                <input
                  type="password"
                  class="form-control"
                  placeholder="密码"
                  required
                />
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox" value="remember-me" />记住用户名
                </label>
              </div>
              <button class="btn btn-lg btn-primary btn-block" type="submit">
                登录</button
              ><br />
            </form>
          </div>
        </div>
      </div>
    </div>
    <!-- 主题页面 -->
    <div class="container" id="container">
      <!-- 轮播图 -->
      <div class="row carousel-holder">
        <div class="col-md-12">
          <div
            class="carousel slide"
            id="carousel-example-generic"
            data-ride="carousel"
          >
            <ol class="carousel-indicators">
              <li
                class="active"
                data-target="#carousel-example-generic"
                data-slide-to="0"
              ></li>
              <li
                data-target="#carousel-example-generic"
                data-slide-to="1"
              ></li>
              <li
                data-target="#carousel-example-generic"
                data-slide-to="2"
              ></li>
              <li
                data-target="#carousel-example-generic"
                data-slide-to="3"
              ></li>
            </ol>
            <div class="carousel-inner">
              <div class="item active banner">
                <img src="./images/111.png" alt="" class="slide-image" />
              </div>
              <div class="item banner">
                <img src="./images/222.png" alt="" class="slide-image" />
              </div>
              <div class="item banner">
                <img src="./images/333.png" alt="" class="slide-image" />
              </div>
              <div class="item banner">
                <img src="./images/444.png" alt="" class="slide-image" />
              </div>
            </div>
            <a
              href="#carousel-example-generic"
              data-slide="prev"
              class="left carousel-control"
            >
              <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a
              href="#carousel-example-generic"
              data-slide="next"
              class="right carousel-control"
            >
              <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
          </div>
        </div>
      </div>
      <!-- 产品目录 -->
      <hr />
      <div class="row-fluid">
        <div class="col-sm-4 col-md-3">
          <h3>所有分类</h3>
          <div class="list-group">
            <a href="category.html" class="list-group-item">吃的</a>
            <a href="category.html" class="list-group-item">喝的</a>
            <a href="category.html" class="list-group-item">玩的</a>
            <a href="category.html" class="list-group-item">凑数的</a>
            <a href="category.html" class="list-group-item">凑数的</a>
            <a href="category.html" class="list-group-item">凑数的</a>
          </div>
        </div>
        <div class="col-sm-8 col-md-9">
          <div class="row">
            <div class="col-xs-6 col-md-3">
              <div class="thumbnail">
                <img src="./images/5.jpg" alt="" />
                <div class="add-to-card">
                  <a
                    href="#"
                    class="glyphicon glyphicon-plus-sign"
                    data-toggle="tooltip"
                    data-placement="top"
                    title="Add to card"
                  ></a>
                </div>
                <div class="caption">
                  <h4 class="pull-right">
                    xxx
                  </h4>
                  <h4><a href="product.html">1<sup>st</sup>商品</a></h4>
                  <p>xxxxxxxxxxxxxxxxxxxxxxxxx</p>
                </div>
                <div class="ratings">
                  <p class="pull-right">
                    <a href="product.html#comments">15评论</a>
                  </p>
                  <p>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                  </p>
                </div>
              </div>
            </div>
            <div class="col-xs-6 col-md-3">
                <div class="thumbnail">
                  <img src="./images/5.jpg" alt="" />
                  <div class="add-to-card">
                    <a
                      href="#"
                      class="glyphicon glyphicon-plus-sign"
                      data-toggle="tooltip"
                      data-placement="top"
                      title="Add to card"
                    ></a>
                  </div>
                  <div class="caption">
                    <h4 class="pull-right">
                      xxx
                    </h4>
                    <h4><a href="product.html">1<sup>st</sup>商品</a></h4>
                    <p>xxxxxxxxxxxxxxxxxxxxxxxxx</p>
                  </div>
                  <div class="ratings">
                    <p class="pull-right">
                      <a href="product.html#comments">15评论</a>
                    </p>
                    <p>
                      <span class="glyphicon glyphicon-star"></span>
                      <span class="glyphicon glyphicon-star"></span>
                      <span class="glyphicon glyphicon-star"></span>
                      <span class="glyphicon glyphicon-star"></span>
                      <span class="glyphicon glyphicon-star"></span>
                    </p>
                  </div>
                </div>
              </div>
              <div class="col-xs-6 col-md-3">
                  <div class="thumbnail">
                    <img src="./images/5.jpg" alt="" />
                    <div class="add-to-card">
                      <a
                        href="#"
                        class="glyphicon glyphicon-plus-sign"
                        data-toggle="tooltip"
                        data-placement="top"
                        title="Add to card"
                      ></a>
                    </div>
                    <div class="caption">
                      <h4 class="pull-right">
                        xxx
                      </h4>
                      <h4><a href="product.html">1<sup>st</sup>商品</a></h4>
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxx</p>
                    </div>
                    <div class="ratings">
                      <p class="pull-right">
                        <a href="product.html#comments">15评论</a>
                      </p>
                      <p>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-xs-6 col-md-3">
                    <div class="thumbnail">
                      <img src="./images/5.jpg" alt="" />
                      <div class="add-to-card">
                        <a
                          href="#"
                          class="glyphicon glyphicon-plus-sign"
                          data-toggle="tooltip"
                          data-placement="top"
                          title="Add to card"
                        ></a>
                      </div>
                      <div class="caption">
                        <h4 class="pull-right">
                          xxx
                        </h4>
                        <h4><a href="product.html">1<sup>st</sup>商品</a></h4>
                        <p>xxxxxxxxxxxxxxxxxxxxxxxxx</p>
                      </div>
                      <div class="ratings">
                        <p class="pull-right">
                          <a href="product.html#comments">15评论</a>
                        </p>
                        <p>
                          <span class="glyphicon glyphicon-star"></span>
                          <span class="glyphicon glyphicon-star"></span>
                          <span class="glyphicon glyphicon-star"></span>
                          <span class="glyphicon glyphicon-star"></span>
                          <span class="glyphicon glyphicon-star"></span>
                        </p>
                      </div>
                    </div>
                  </div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-md-3">
              <div class="thumbnail">
                <img src="./images/5.jpg" alt="" />
                <div class="add-to-card">
                  <a
                    href="#"
                    class="glyphicon glyphicon-plus-sign"
                    data-toggle="tooltip"
                    data-placement="top"
                    title="Add to card"
                  ></a>
                </div>
                <div class="caption">
                  <h4 class="pull-right">
                    xxx
                  </h4>
                  <h4><a href="product.html">1<sup>st</sup>商品</a></h4>
                  <p>xxxxxxxxxxxxxxxxxxxxxxxxx</p>
                </div>
                <div class="ratings">
                  <p class="pull-right">
                    <a href="product.html#comments">15评论</a>
                  </p>
                  <p>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                  </p>
                </div>
              </div>
            </div>
            <div class="col-xs-6 col-md-3">
                <div class="thumbnail">
                  <img src="./images/5.jpg" alt="" />
                  <div class="add-to-card">
                    <a
                      href="#"
                      class="glyphicon glyphicon-plus-sign"
                      data-toggle="tooltip"
                      data-placement="top"
                      title="Add to card"
                    ></a>
                  </div>
                  <div class="caption">
                    <h4 class="pull-right">
                      xxx
                    </h4>
                    <h4><a href="product.html">1<sup>st</sup>商品</a></h4>
                    <p>xxxxxxxxxxxxxxxxxxxxxxxxx</p>
                  </div>
                  <div class="ratings">
                    <p class="pull-right">
                      <a href="product.html#comments">15评论</a>
                    </p>
                    <p>
                      <span class="glyphicon glyphicon-star"></span>
                      <span class="glyphicon glyphicon-star"></span>
                      <span class="glyphicon glyphicon-star"></span>
                      <span class="glyphicon glyphicon-star"></span>
                      <span class="glyphicon glyphicon-star"></span>
                    </p>
                  </div>
                </div>
              </div>
              <div class="col-xs-6 col-md-3">
                  <div class="thumbnail">
                    <img src="./images/5.jpg" alt="" />
                    <div class="add-to-card">
                      <a
                        href="#"
                        class="glyphicon glyphicon-plus-sign"
                        data-toggle="tooltip"
                        data-placement="top"
                        title="Add to card"
                      ></a>
                    </div>
                    <div class="caption">
                      <h4 class="pull-right">
                        xxx
                      </h4>
                      <h4><a href="product.html">1<sup>st</sup>商品</a></h4>
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxx</p>
                    </div>
                    <div class="ratings">
                      <p class="pull-right">
                        <a href="product.html#comments">15评论</a>
                      </p>
                      <p>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-xs-6 col-md-3">
                    <div class="thumbnail">
                      <img src="./images/5.jpg" alt="" />
                      <div class="add-to-card">
                        <a
                          href="#"
                          class="glyphicon glyphicon-plus-sign"
                          data-toggle="tooltip"
                          data-placement="top"
                          title="Add to card"
                        ></a>
                      </div>
                      <div class="caption">
                        <h4 class="pull-right">
                          xxx
                        </h4>
                        <h4><a href="product.html">1<sup>st</sup>商品</a></h4>
                        <p>xxxxxxxxxxxxxxxxxxxxxxxxx</p>
                      </div>
                      <div class="ratings">
                        <p class="pull-right">
                          <a href="product.html#comments">15评论</a>
                        </p>
                        <p>
                          <span class="glyphicon glyphicon-star"></span>
                          <span class="glyphicon glyphicon-star"></span>
                          <span class="glyphicon glyphicon-star"></span>
                          <span class="glyphicon glyphicon-star"></span>
                          <span class="glyphicon glyphicon-star"></span>
                        </p>
                      </div>
                    </div>
                  </div>
        </div>
      </div>
      <hr />
      <footer>
        <div class="row">
          <div class="col-lg-12">
            <a href="index.html">bootstrap编写的商城页面</a>
          </div>
        </div>
      </footer>
    </div>

    <script src="./js/jquery.js"></script>
    <script src="./bootstrap3/js/bootstrap.js"></script>
  </body>
</html>
